<template>
  <m-page>
    <!-- 申请用款信息录入页 -->
    <m-header title="申请用款信息录入"></m-header>
    <!-- 申请表头部 -->
    <div class="apply_form">
      <div>
        <ynet-field-item solid title="融易通卡" :content="form.CreditNo" />
        <!-- 剩余额度 -->
        <ynet-field-item solid title="剩余额度" content="2万元" class="quota_used" />
        <!-- 申请额度 -->
        <ynet-input-item
          ref="input1"
          title="申请额度"
          type="money"
          placeholder="请输入申请额度"
          is-amount
          v-model="form.LoanAmt"
          @change="inputchange()"
        >
          <span slot="right">万元</span>
        </ynet-input-item>
      </div>
    </div>
    <div class="emptybox"></div>
    <!-- 申请表填写 -->
    <div class="apply_information">
      <!-- 还款日期 -->
      <ynet-field-item
        solid
        title="还款日期"
        :content="form.date"
        placeholder="请选择还款日期"
        @click="datePicker()"
        arrow
      />
      <!-- 申请期限 -->
      <ynet-input-item
        ref="input1"
        title="申请期限"
        type="digit"
        placeholder="最短1天，最长365天"
        is-amount
        v-model="form.LoanDay"
        @change="inputchange()"
      >
        <span slot="right">天</span>
      </ynet-input-item>
      <ynet-field-item
        solid
        title="借款用途"
        @click="usedSelect()"
        :content="form.used"
        placeholder="点击选择借款用途"
        arrow
      />
      <md-selector
        v-model="isUsedSelectorShow"
        :data="used_options"
        title="选择借款用途"
        large-radius
        is-check
        @choose="onUsedChoose"
      ></md-selector>
      <div class="message" v-if="showMsg">
        申请额度不可超过剩余额度
        <ynet-amount value="20000" :precision="2" />
      </div>
    </div>
    <ynet-button type="disabled" v-if="isSubmit === '0'">下一步</ynet-button>
    <ynet-button type="warning" v-if="isSubmit === '1'" @click="submit()">下一步</ynet-button>
    <!-- 温馨提示 -->
    <div class="tips">
      <p>温馨提示：</p>
      <p>1、融易通卡每日申请用款开放时间为8：00-22：00。</p>
      <p>2、还款日期不可超过卡片有效期。</p>
    </div>
  </m-page>
</template>

<script>
import {
  InputItem,
  FieldItem,
  CellItem,
  Button,
  Amount
} from "ynet-mobile";
import { Selector } from "mand-mobile";
export default {
  components: {
    [InputItem.name]: InputItem,
    [FieldItem.name]: FieldItem,
    [CellItem.name]: CellItem,
    [Button.name]: Button,
    [Amount.name]: Amount,
    [Selector.name]: Selector
  },
  data() {
    return {
      isUsedSelectorShow: false,  //借款用途选择列表显示
      form: {
        CreditNo: "6217 7654 8975 2345", //贷记卡号
        TransType: "1", //交易类别 1-贷款试算 2-贷款申请
        LoanAmt: "", //贷款金额
        date: "",
        used: "",
        LoanDay: "", //贷款天数
        PassWord: "", //密码
        AesKey: "", //密钥
        PRODUCT: "RYT", //卡种代码
        PlanNum: "" //贷款计划编号
      },
      isSubmit: "0",
      showMsg: false, //消息提示
      used_options: [
        {
          value: "1",
          text: "流动资金周转"
        },
        {
          value: "2",
          text: "购买经营设备"
        },
        {
          value: "3",
          text: "支付经营场所租金"
        },
        {
          value: "4",
          text: "经营场所装修"
        },
        {
          value: "5",
          text: "其他经营相关事宜"
        }
      ]
    };
  },
  created() {},
  mounted() {},
  methods: {
    //页面跳转
    goto(item, params) {
      let url = `smallbusinessloan/rong_yi_tong_card/${item}`;
      app.api.pushWindow(url, params);
    },

    // 输入框改变事件 值存在则按钮可用
    inputchange() {
      if (
        (this.form.date &&
          this.form.LoanAmt &&
          this.form.used &&
          this.form.LoanDay) !== ""
      ) {
        this.isSubmit = "1";
      } else {
        this.isSubmit = "0";
      }
    },

    //日期选择
    //点击选择还款日期
    datePicker() {
      app.api
        .showDatePicker({
          type: "0",
          title: "请选择还款日期",
          minimumDate: "",
          maximumDate: "",
          dateFormat: "yyyy-MM-dd"
        })
        .then(res => {
          console.log(res.currentDate);
          this.form.date = res.currentDate;
        });
    },

    //提交按钮 提交成功之后跳转至确认申请信息页
    submit() {
      //如果申请金额大于可用额度 则出现提示
      if (this.form.LoanAmt > 2) {
        this.showMsg = true;
      } else {
        this.showMsg = false;
        this.goto('apply_checked.html')
      }
    },

    //显示借款用途选择列表
    usedSelect() {
      this.isUsedSelectorShow = true;
    },

    //借款用途选择事件
    onUsedChoose({ text }) {
      this.form.used = text;
      this.inputchange();
    }
  },
  watch: {},
  computed: {}
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>

